<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- <button-counter
        :zhangsan="num"
        title="我是第1个按钮"
        name="高洁"
      ></button-counter> -->
      <!-- <wenzhang v-for="v in posts" :key="v.id" :item="v"></wenzhang> -->
      <input type="text" v-model="lao6" />
      我是输入的值1：{{lao6}}
      <shurukuang v-bind:value="searchText" v-on:wangwu="fun">
        我是插槽</shurukuang
      >
      我是输入的值2：{{searchText}}
    </div>
  </body>
  <script>
    // Vue.component('button-counter', {
    //   data: function () {
    //     return {
    //       count: 0,
    //     }
    //   },
    //   props: ['title', 'name', 'zhangsan'],
    //   computed: {
    //     classObject: function () {
    //       return {
    //         'btn-success': this.count < 10,
    //         'btn-warning': this.count >= 10 && this.count < 20,
    //         'btn-danger': this.count >= 20,
    //       }
    //     },
    //   },
    //   template: `<div><h1>{{title}}</h1>我是{{name}}{{zhangsan}}<button v-on:click="fun">You clicked me {{ count }} times.</button></div>`,
    //   methods: {
    //     fun() {
    //       console.log(this.title, this.name)
    //     },
    //   },
    // })

    // Vue.component('wenzhang', {
    //   template:
    //     '<div>\
    //     <h1>\
    //         {{item.title}}\
    //     </h1>\
    //     <p>\
    //         {{item.content}}\
    //     </p>\
    //     </div>',
    //   props: ['item'],
    // })
    Vue.component('shurukuang', {
      template: `<div>
            <input type="text" v-on:input="$emit('wangwu', $event.target.value)">
            <slot></slot>
        </div>`,
      //   props: ['item'],
    })
    var app = new Vue({
      el: '#app',
      data: {
        searchText: '',
        lao6: '',
        num: 666,
        posts: [
          { id: 1, title: 'My journey with Vue', content: '我是内容1' },
          { id: 2, title: 'Blogging with Vue', content: '我是内容2' },
          { id: 3, title: 'Why Vue is so fun', content: '我是内容3' },
        ],
      },
      methods: {
        fun(params) {
          this.searchText = params
        },
      },
    })
  </script>
</html>
